<template>
	<div>
		<el-card class="box-card">
		  <div slot="header" class="clearfix">
			<div class="iconfont iconfont-style" >&#xe627;猜你喜欢</div>
		  </div>		  
		  <el-card v-for="item of HotSuggistList" :key="item.id" style="margin-bottom: 0.15rem;">
		  <!-- 添加内容 -->
		  <div class="content-div">
			  <!-- 图片层 -->
				  <div class="image-floor">
					  <img :src="item.imageUrl" />
				  </div>
				  <!-- 描述层 -->
				  <div class="describe-floor">
					  <!-- 标题 -->
					<div class="describe-floor-div">
						<p class="content-title">{{item.title}}</p>
					</div>
					<!-- 评分 -->
					<div class="describe-floor-div-middle">
						<!-- 评分 -->
						<el-rate
						  v-model='item.value'
						  disabled
						  show-score
						  text-color="#ff9900">
						</el-rate>
					</div>
					<!-- 价格 -->
					<div class="describe-floor-div-footer">
						<p style="float: left;font-size: 12px;padding-top: 0.1rem;"><span style="font-size: 25px;color: orange;">￥{{item.price}}</span>元起</p>
						<div class="content-comment">{{item.comment}}条评论</div>
					</div>
				  </div>
			  </div>
			</el-card>
		</el-card>
	</div>
</template>

<script>
	export default{
		name:"HomeHotsuggist",
		props:{
			HotSuggistList:Array
		},
		data:function(){
			return{
				value:''
			}
		}
	}
</script>

<style scoped="scoped">
	.el-card__header{
		height: 2rem;
	}
	.content-div{
		height: 100px;
	}
	.image-floor{
		height: 100%;
		/* 左边40% */
		width: 40%;
		float: left;
		overflow: hidden;
		box-sizing: border-box;
		border:1px solid #99A9BF;
	}
	.image-floor img{
		width: 100%;
		overflow: hidden;
		padding-bottom: 100%;
	}
	.describe-floor{
		/* 剩下右边60% */
		width: 60%;
		height: 100%;
		float: right;
		background-color:white;
	}
	.describe-floor-div{
		width: 100%;
		background-color: white;
		height: 25%;
		position: relative;
		margin: 0.1rem;
	}
	.describe-floor-div-middle{
		width: 100%;
		background-color: white;
		height: 20%;
		position: relative;
		margin: 0.1rem;
	}
	.describe-floor-div-footer{
		width: 100%;
		background-color: white;
		/* height: %; */
		position: relative;
		margin: 0.1rem;
	}
	.describe-floor-div ul{
		display: flex;
	}
	.content-title{
		position: relative;
		top: 1%;
		left: 3%;
		font-weight: 900;
		font-size: 17px;
	}
	.content-comment{
		float: right;
		font-size: 12px;
		padding-top: 0.3rem;
		height: 100%;
	}
	.el-card__body{
		padding-right: 0.1rem;
		padding-left: 0rem;
		padding-top: 0rem;
	}
	.iconfont-style{
		color: orange;
		text-align: center;
	}
	.box-card{
		margin-top: 0.3rem;
		width: 100%;
	}
</style>
